<template>
	<view class="invoice-history">
		<view class="list">
			<view class="list-item" @click="handleClick">
				<view class="title">
					<text>2018-08-01</text>
					<view style="display: flex;align-items: center;">
						<text style="margin-right: 12rpx;">已开票</text>
						<u-icon name="arrow-right" color="#878787" size="14"></u-icon>
					</view>
				</view>
				<view class="content">
					<view class="tips">
						<text>福利商城</text>
						<view class="tips-invoice">电子发票</view>
					</view>
					<view class="price">
						<text style="font-size: 28rpx;">￥</text>
						<text>341.20</text>
					</view>
				</view>
			</view>
			<view class="list-item" @click="handleClick">
				<view class="title">
					<text>2018-08-01</text>
					<view style="display: flex;align-items: center;">
						<text style="margin-right: 12rpx;" class="color1">开票中</text>
						<u-icon name="arrow-right" color="#878787" size="14"></u-icon>
					</view>
				</view>
				<view class="content">
					<view class="tips">
						<text>福利商城</text>
						<view class="tips-invoice">电子发票</view>
					</view>
					<view class="price">
						<text style="font-size: 28rpx;">￥</text>
						<text>341.20</text>
					</view>
				</view>
			</view>
			<view class="list-item" @click="handleClick">
				<view class="title">
					<text>2018-08-01</text>
					<view style="display: flex;align-items: center;">
						<text style="margin-right: 12rpx;" class="color2">已作废</text>
						<u-icon name="arrow-right" color="#878787" size="14"></u-icon>
					</view>
				</view>
				<view class="content">
					<view class="tips">
						<text>福利商城</text>
						<view class="tips-invoice">电子发票</view>
					</view>
					<view class="price">
						<text style="font-size: 28rpx;">￥</text>
						<text>341.20</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: 'InvoiceHistory',
		data() {
			return {}
		},
		methods: {
			handleClick(options){
				uni.navigateTo({						url:"/myPages/invoice/details"				})
			}
		},
	}
</script>
<style lang="scss" scoped>
	page {
		background-color: #F7F7F7;
	}
	.color1{
		color:#FD8F19 !important;
	}
	.color2{
		color: #FF575E !important;
	}
	.invoice-history {
		.list {
			.list-item {
				margin: 0 auto;
				margin-top: 24rpx;
				width: 686rpx;
				height: 165rpx;
				background: #FFFFFF;
				border-radius: 30rpx;
				box-sizing: border-box;
				padding: 32rpx 32rpx 0 32rpx;

				.content {
					display: flex;
					justify-content: space-between;
					color: #1F1F1F;
					margin-top: 24rpx;
					.price {
						font-weight: bold;
						font-size: 36rpx;
					}

					.tips {
						font-size: 32rpx;
						display: flex;
						align-items: center;
						.tips-invoice {
							width: 108rpx;
							height: 38rpx;
							text-align: center;
							line-height: 38rpx;
							border-radius: 3rpx;
							margin-left: 18rpx;
							border: 1rpx solid #C1C1C1;
							color: #C1C1C1;
							font-size: 24rpx;
						}
					}
				}

				.title {
					display: flex;
					justify-content: space-between;
					color: #878787;
					font-size: 28rpx;
				}
			}
		}
	}
</style>
